<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8" >
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    <title>WebSocket测试demo</title>

    <style type="text/css">
        #connect-container {
            float: left;
            width: 400px
        }

        #connect-container div {
            padding: 5px;
        }

        #console-container {
            float: left;
            margin-left: 15px;
            width: 400px;
        }

        #console {
            border: 1px solid #CCCCCC;
            border-right-color: #999999;
            border-bottom-color: #999999;
            height: 170px;
            overflow-y: scroll;
            padding: 5px;
            width: 100%;
        }

        #console p {
            padding: 0;
            margin: 0;
        }
    </style>
    <script src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        var ws = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('reverse1').disabled = !connected;
            document.getElementById('reverse2').disabled = !connected;
            document.getElementById('reverse3').disabled = !connected;
            document.getElementById('reverse4').disabled = !connected;


        }

        function connect() {
            var target = document.getElementById('target').value;
            ws = new WebSocket(target);
            ws.onopen = function () {
                setConnected(true);
                log('Info: WebSocket connection opened.');
            };
            ws.onmessage = function (event) {
                log('Received: ' + event.data);
            };
            ws.onclose = function () {
                setConnected(false);
                log('Info: WebSocket connection closed.');
            };
        }

        function updateTarget() {
            if (window.location.protocol == 'http:') {
                document.getElementById('target').value = 'ws://' + window.location.host + document.getElementById('target').value;
            } else {
                document.getElementById('target').value = 'wss://' + window.location.host + document.getElementById('target').value;
            }
        }

        function disconnect() {
            if (ws != null) {
                ws.close();
                ws = null;
            }
            setConnected(false);
        }

        function reverse1() {
            if (ws != null) {
                var message = document.getElementById('message1').value;
                log('Sent: ' + message);
                ws.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }

        function reverse2() {
            if (ws != null) {
                var message = document.getElementById('message2').value;
                log('Sent: ' + message);
                ws.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }
        function reverse3() {
            if (ws != null) {
                var message = document.getElementById('message3').value;
                log('Sent: ' + message);
                ws.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }

        function reverse4() {
            if (ws != null) {
                var message = document.getElementById('message4').value;
                log('Sent: ' + message);
                ws.send(message);
            } else {
                alert('WebSocket connection not established, please connect.');
            }
        }


        function log(message) {
            var console = document.getElementById('console');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            console.appendChild(p);
            while (console.childNodes.length > 25) {
                console.removeChild(console.firstChild);
            }
            console.scrollTop = console.scrollHeight;
        }

        function clearA() {
            $("#console").empty();
        }
        
        
    </script>
</head>
<body onload="updateTarget();Load()" onunload="Unload()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div style="display: none">
    <div id="connect-container">
        <div>
            <input id="target" type="text" size="40" style="width: 350px" value="/fenful/watching/guaMachine/"/>
        </div>
        <div>
            <button id="connect" onclick="connect();">连接</button>
            <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
        </div>
        <div>
            <textarea id="message1" style="width: 350px">{"router":"ApiMachineService.machineLogin","machineId":"bd3eedf4947a4b19947786637ab41ac5"}</textarea>
        </div>
        <div>
            <button id="reverse1" onclick="reverse1();" disabled="disabled">机器登录</button>
        </div>
        <div>
            <textarea id="message2" style="width: 350px">{"router":"ApiMachineService.userLogin","machineId":"bd3eedf4947a4b19947786637ab41ac5","userId":"eec0cd3c41084484a53badaacc4b8608"}</textarea>
        </div>
        <div>
            <button id="reverse2" onclick="reverse2();" disabled="disabled">用户登录</button>
        </div>
        <div>
            <textarea id="message3" style="width: 350px">{"router":"ApiMachineService.userLogout","machineId":"bd3eedf4947a4b19947786637ab41ac5","userId":"eec0cd3c41084484a53badaacc4b8608"}</textarea>
        </div>
        <div>
            <button id="reverse3" onclick="reverse3();" disabled="disabled">用户登出</button>
        </div>
        <div>
            <textarea id="message4" style="width: 350px">{"router":"ApiMachineService.userLogout","machineId":"bd3eedf4947a4b19947786637ab41ac5","userId":"eec0cd3c41084484a53badaacc4b8608"}</textarea>
        </div>
        <div>
            <button id="reverse4" onclick="reverse3();" disabled="disabled">用户下单</button>
        </div>

    </div>
    <div id="console-container">
        <div id="console"></div>
        <div>
            <button id="clear" onclick="clearA();" >清空</button>
        </div>
    </div>
</div>

<div style="height: 20px;clear: both"></div>


<div><textarea id="ticketNum" rows="3" cols="50"></textarea><button onclick="Scan()">控制点击</button></div>
<OBJECT ID="EloamGlobal_ID" CLASSID="CLSID:52D1E686-D8D7-4DF2-9A74-8B8F4650BF73"></OBJECT>


<script language="javascript" type="text/javascript">
    function aa() {
        alert(1);
    }



    var EloamGlobal;
    var dev1;
    var dev2;
    var dev3;
    var video1;
    var video2;
    var video3;

    function Load()
    {
        EloamGlobal = document.getElementById("EloamGlobal_ID");
        EloamGlobal.InitDevs();
        $("#ticketNum").focus();
    }

    function Unload()
    {
        if (video1)
        {
            EloamView1.SetText("", 0);
            video1.Destroy();
            video1 = null;
        }
        if (video2)
        {
            EloamView2.SetText("", 0);
            video2.Destroy();
            video2 = null;
        }
        if (video3)
        {
            EloamView3.SetText("", 0);
            video3.Destroy();
            video3 = null;
        }
        if(dev1)
        {
            dev1.Destroy();
            dev1 = null;
        }
        if(dev2)
        {
            dev2.Destroy();
            dev2 = null;
        }
        if(dev3)
        {
            dev3.Destroy();
            dev3 = null;
        }
        EloamGlobal.DeinitDevs();
        EloamGlobal = null;
    }


    var base64;
    function Scan()
    {
        if (video1)
        {
            var date = new Date();
            var yy = date.getFullYear().toString();
            var mm = (date.getMonth() + 1).toString();
            var dd = date.getDate().toString();
            var hh = date.getHours().toString();
            var nn = date.getMinutes().toString();
            var ss = date.getSeconds().toString();
            var mi = date.getMilliseconds().toString();

            var name_str = $("#ticketNum").val()+ ".jpg";
            if(!name_str){
                name_str = yy + mm + dd + hh + nn + ss + mi  + ".jpg";
            }

            var Name = "D:\\" + name_str;

            var image = video1.CreateImage(0, EloamView1.GetView());
            if (image)
            {
                base64 = image.GetBase64(2,50);
                EloamView1.PlayCaptureEffect();
                image.Save(Name, 0);
                EloamThumbnail.Add(Name);
                image.Destroy();
                image = null;
                $("#ticketImg").attr("src","data:image/jpeg;base64,"+base64);
                $("#ticketNum").focus();
            }
        }
    }

    function ShowVideo()
    {
        CloseVideo();

        var select1 = document.getElementById('res1');
        var resolution1 = select1.selectedIndex;

        var select2 = document.getElementById('res2');
        var resolution2 = select2.selectedIndex;

        var select3 = document.getElementById('res3');
        var resolution3 = select3.selectedIndex;

        if(dev1)
        {
            video1 = dev1.CreateVideo(resolution1, 0);
            if (video1)
            {
                EloamView1.SelectVideo(video1);
                EloamView1.SetText("打开视频中，请等待...", 0);
            }
        }
        if(dev2)
        {
            video2 = dev2.CreateVideo(resolution2, 0);
            if (video2)
            {
                EloamView2.SelectVideo(video2);
                EloamView2.SetText("打开视频中，请等待...", 0);
            }
        }
        if(dev3)
        {
            video3 = dev3.CreateVideo(resolution3, 0);
            if (video3)
            {
                EloamView3.SelectVideo(video3);
                EloamView3.SetText("打开视频中，请等待...", 0);
            }
        }
    }

    function CloseVideo()
    {
        if (video1)
        {
            EloamView1.SetText("", 0);
            video1.Destroy();
            video1 = null;
        }
        if (video2)
        {
            EloamView2.SetText("", 0);
            video2.Destroy();
            video2 = null;
        }
        if (video3)
        {
            EloamView3.SetText("", 0);
            video3.Destroy();
            video3 = null;
        }
    }

</script>
<script language="Javascript" event="DevChange(type, idx, dbt)" for="EloamGlobal_ID" type="text/JavaScript">

    if (1 == type)
    {
        //第一个头
        if( 0 == idx)
        {
            if (1 == dbt)
            {
                dev1 = EloamGlobal.CreateDevice(1, 0);
                if(dev1)
                {
                    video1 = dev1.CreateVideo(0, 0);
                    if (video1)
                    {
                        EloamView1.SelectVideo(video1);
                        EloamView1.SetText("打开视频中，请等待...", 0);
                    }
                }
                //GetEloamType() == 1表示是主头
                document.getElementById("lab1").innerHTML = dev1.GetFriendlyName() + "@" + dev1.GetEloamType().toString();
                var select = document.getElementById('res1');
                var nResolution = dev1.GetResolutionCount();
                document.getElementById('res1').options.length = 0;
                for(var i = 0; i < nResolution; i++)
                {
                    var width = dev1.GetResolutionWidth(i);
                    var heigth = dev1.GetResolutionHeight(i);
                    select.add(new Option(width.toString() + "*" + heigth.toString()));
                }
            }
            if (2 == dbt)
            {
                if(dev1)
                {
                    if(idx == dev1.GetIndex())
                    {
                        if(video1)
                        {
                            EloamView1.SetText("", 0);
                            video1.Destroy();
                            video1 = null;
                        }
                        dev1.Destroy();
                        dev1 = null;

                        document.getElementById('res1').options.length = 0;
                    }
                }
                if(dev2)
                {
                    if(idx == dev2.GetIndex())
                    {
                        if(video2)
                        {
                            EloamView2.SetText("", 0);
                            video2.Destroy();
                            video2 = null;
                        }
                        dev2.Destroy();
                        dev2 = null;

                        document.getElementById('res2').options.length = 0;
                    }
                }
                if(dev3)
                {
                    if(idx == dev3.GetIndex())
                    {
                        if(video3)
                        {
                            EloamView3.SetText("", 0);
                            video3.Destroy();
                            video3 = null;
                        }
                        dev3.Destroy();
                        dev3 = null;

                        document.getElementById('res3').options.length = 0;
                    }
                }
            }
        }
        //第二个头
        if( 1 == idx)
        {
            if (1 == dbt)
            {
                dev2 = EloamGlobal.CreateDevice(1, 1);
                if(dev1)
                {
                    video2 = dev2.CreateVideo(0, 0);
                    if (video2)
                    {
                        EloamView2.SelectVideo(video2);
                        EloamView2.SetText("打开视频中，请等待...", 0);
                    }
                    document.getElementById("lab2").innerHTML = dev2.GetFriendlyName() + "@" + dev2.GetEloamType().toString();
                    var select = document.getElementById('res2');
                    var nResolution = dev2.GetResolutionCount();
                    document.getElementById('res2').options.length = 0;
                    for(var i = 0; i < nResolution; i++)
                    {
                        var width = dev2.GetResolutionWidth(i);
                        var heigth = dev2.GetResolutionHeight(i);
                        select.add(new Option(width.toString() + "*" + heigth.toString()));
                    }
                }
            }
            if (2 == dbt)
            {
                if(dev1)
                {
                    if(idx == dev1.GetIndex())
                    {
                        if(video1)
                        {
                            EloamView1.SetText("", 0);
                            video1.Destroy();
                            video1 = null;
                        }
                        dev1.Destroy();
                        dev1 = null;

                        document.getElementById('res1').options.length = 0;
                    }
                }
                if(dev2)
                {
                    if(idx == dev2.GetIndex())
                    {
                        if(video2)
                        {
                            EloamView2.SetText("", 0);
                            video2.Destroy();
                            video2 = null;
                        }
                        dev2.Destroy();
                        dev2 = null;

                        document.getElementById('res2').options.length = 0;
                    }
                }
                if(dev3)
                {
                    if(idx == dev3.GetIndex())
                    {
                        if(video3)
                        {
                            EloamView3.SetText("", 0);
                            video3.Destroy();
                            video3 = null;
                        }
                        dev3.Destroy();
                        dev3 = null;

                        document.getElementById('res3').options.length = 0;
                    }
                }
            }
        }
        //第三个头
        if( 2 == idx)
        {
            if (1 == dbt)
            {
                dev3 = EloamGlobal.CreateDevice(1, 2);
                if(dev3)
                {
                    video3 = dev3.CreateVideo(0, 0);
                    if (video3)
                    {
                        EloamView3.SelectVideo(video3);
                        EloamView3.SetText("打开视频中，请等待...", 0);
                    }
                    document.getElementById("lab3").innerHTML = dev3.GetFriendlyName() + "@" + dev3.GetEloamType().toString();
                    var select = document.getElementById('res3');
                    var nResolution = dev3.GetResolutionCount();
                    document.getElementById('res3').options.length = 0;
                    for(var i = 0; i < nResolution; i++)
                    {
                        var width = dev3.GetResolutionWidth(i);
                        var heigth = dev3.GetResolutionHeight(i);
                        select.add(new Option(width.toString() + "*" + heigth.toString()));
                    }
                }
            }
            if (2 == dbt)
            {
                if(dev1)
                {
                    if(idx == dev1.GetIndex())
                    {
                        if(video1)
                        {
                            EloamView1.SetText("", 0);
                            video1.Destroy();
                            video1 = null;
                        }
                        dev1.Destroy();
                        dev1 = null;

                        document.getElementById('res1').options.length = 0;
                    }
                }
                if(dev2)
                {
                    if(idx == dev2.GetIndex())
                    {
                        if(video2)
                        {
                            EloamView2.SetText("", 0);
                            video2.Destroy();
                            video2 = null;
                        }
                        dev2.Destroy();
                        dev2 = null;

                        document.getElementById('res2').options.length = 0;
                    }
                }
                if(dev3)
                {
                    if(idx == dev3.GetIndex())
                    {
                        if(video3)
                        {
                            EloamView3.SetText("", 0);
                            video3.Destroy();
                            video3 = null;
                        }
                        dev3.Destroy();
                        dev3 = null;

                        document.getElementById('res3').options.length = 0;
                    }
                }
            }
        }
    }
</script>

<table>
    <tr>
        <td>
            <div>
                <OBJECT ID="EloamView1" CLASSID="CLSID:26BA9E7F-78E9-4FB8-A05C-A4185D80D759" WIDTH="400" HEIGHT="400"></OBJECT>
                <OBJECT ID="EloamView2" CLASSID="CLSID:26BA9E7F-78E9-4FB8-A05C-A4185D80D759" WIDTH="400" HEIGHT="400"></OBJECT>
            </div>
            <div>
                <OBJECT ID="EloamThumbnail" CLASSID="CLSID:B5535A1B-D25B-4B3C-854F-94B12E284A4E" WIDTH="800" HEIGHT="200"></OBJECT>
            </div>

            <table>
                <tr>
                    <td>
                        <label id="lab1">设备1</label>
                        <select id="res1" style="width: 90px"></select>
                        <label id="lab2">设备2</label>
                        <select id="res2" style="width: 90px"></select>
                        <label id="lab3">设备3</label>
                        <select id="res3" style="width: 90px"></select>
                        <input class="submit_01" type="button" value="打开视频" onclick="ShowVideo()" />
                        <input class="submit_01" type="button" value="关闭视频" onclick="CloseVideo()" />
                        <input class="submit_01" type="button" value="拍照" onclick="Scan()" />
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <div>
                <img id="ticketImg" src="" width="650px"/>
            </div>
        </td>
    </tr>
</table>


</body>
</html>
